import React, {useEffect, useState} from 'react';
import "@/css/global.less"
import {MenuFoldOutlined, MenuUnfoldOutlined,} from '@ant-design/icons';
import {Layout, Button, theme, Breadcrumb, Menu, Modal} from 'antd';
import {useNavigate, useLocation, Outlet} from "react-router-dom";
import {defaulyRoutes as routes} from "@/router/router"
import {flatten} from "@/utils";
import './layout.less'
import {useSelector} from "react-redux";
import {IRootReducer} from "@/store";
import type {MenuProps} from 'antd';
import {reactLocalStorage} from "reactjs-localstorage";

const {Header, Sider, Content} = Layout;
type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}


const ContentLayout: React.FC = () => {

    const [user, setUser]: any = useState(reactLocalStorage.getObject('user', {}));

    const menus: any = useSelector((state: IRootReducer) => {  //拿到store中的state
        return state.userReducer.menu
    })

    const [items, setItems] = useState([]);

    useEffect(() => {
        if (Object.keys(menus).length && menus.children) {
            setItems(menus.children.map((item: any) => getItem(item.title, item.path)))
        }
    }, [menus])

    const navigate = useNavigate();
    const location = useLocation();
    const {pathname} = location;
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: {colorBgContainer},
    } = theme.useToken();

    const [open, setOpen] = useState(false);

    const showModal = () => {
        setOpen(true);
    };

    const hideModal = () => {
        // 退出登录 清除缓存中的用户信息，跳转到登录页
        reactLocalStorage.remove('user');
        setOpen(false);
        navigate('/login')
    };

    const [BreadcrumbItems, setBreadcrumbItems] = useState<any>([]);

    // 菜单点击事件 点击进行跳转
    const menuHandler = (e: any) => {
        navigate(e.key, {replace: true})
    }

    const getPath = () => {
        const res = pathname.split('/').filter(i => i);
        const arr = res.map((_, index) => {
            let url = `/${res.slice(0, index + 1).join('/')}`;
            let title = flatten(routes).map((item: any) => {
                if (item.path == url) {
                    return item?.meta?.title || "title"
                }
            })
            return <Breadcrumb.Item key={url}>{title}</Breadcrumb.Item>
        })
        // 将这个结果，更新到页面
        setBreadcrumbItems((prevState: any) => arr)
    }

    return (
        //   <RequireAuth>
        <Layout className="layout">
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo"/>
                {/*  menu 侧边菜单  */}
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={items}
                    onClick={menuHandler}
                />
            </Sider>
            <Layout>
                <Header style={{padding: 0, background: colorBgContainer, display: "flex"}}>
                    {/*  侧边栏伸缩控制按钮  */}
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <div className={'flex'}>
                        面包屑

                    </div>
                    <div className="userInfo">
                        当前登录人： {user.username}
                        <Button type="primary" size="small" onClick={showModal}>退出登录</Button>
                        <Modal
                            title="提示"
                            open={open}
                            onOk={hideModal}
                            onCancel={hideModal}
                            okText="确认"
                            cancelText="取消"
                        >
                            <p>是否退出登录？</p>
                        </Modal>
                    </div>
                    {/*  面包屑导航  */}
                    {/*<Breadcrumb style={{*/}
                    {/*    fontSize: '16px',*/}
                    {/*    height: '60px',*/}
                    {/*    lineHeight: '60px',*/}
                    {/*}}*/}
                    {/*>*/}
                    {/*    {BreadcrumbItems}*/}
                    {/*</Breadcrumb>*/}
                </Header>
                {/*  主题内容  */}
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                    }}
                >
                    {/*  路由出口  */}
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
        //   </RequireAuth>
    );
};

export default ContentLayout;
